<template>
	<view class="app-container">
		<fa-steps :active="currentIndex" class="steps-container"></fa-steps>
		<swiper :autoplay="false" :disable-touch="true" :current="currentIndex" class="swiper-container">
			<swiper-item>
				<button type="primary" class="custom-btn" @click="handleScanMachineBarCode">扫描机器条码</button>
			</swiper-item>
			<swiper-item>
				<button type="primary" class="custom-btn" @click="handleScanMachineQRCode">扫描机器二维码</button>
				<view class="machine-plate-text-container">
					机器条码：{{ formData.productionControlNo || '-' }}
				</view>
			</swiper-item>
			<swiper-item>
				<view class="machine-plate" @click="captureMachinePlate" v-if="!imagesrc">
					<image src="/static/image/photo.png" class="machine-plate-image"></image>
					<view class="machine-plate-text">拍摄机器铭牌</view>
				</view>
				<image v-if="imagesrc" :src="imagesrc" style="width: 100%;" mode="widthFix"
					@click="captureMachinePlate"></image>
				<view class="machine-plate-text-container" :style="{ color: calcTextColor }">
					二维码识别日期：{{ formData.finishDate || '-' }} <br />
					铭牌识别日期：{{ ocrDate || '-' }}
				</view>
				<button v-if="formData.finishDate" type="primary" class="custom-btn" style="margin-top: 20rpx;"
					@click="submitOrder">提交</button>
			</swiper-item>
		</swiper>
		<view class="reset-button" @click="onResetButton">
			<text>重置</text>
		</view>
		<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d"
			:style="{ width: canvasSize.width + 'px', height: canvasSize.height + 'px', position: 'absolute', left: '-500000px', top: '-500000px' }" />
	</view>
</template>

<script>
import permision from "@/common/permission.js"
export default {
	data() {
		return {
			currentIndex: 0,
			imagesrc: null,
			canvasSize: {
				width: 300,
				height: 200
			},
			formData: {
				productionControlNo: '',
				finishDate: ''
			},
			ocrDate: '',
			mpaasScanModule: null
		};
	},
	onLoad() {
		// #ifdef APP-PLUS
		this.mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")
		// #endif
	},
	computed: {
		calcTextColor() {
			// 如果二维码识别日期或铭牌识别日期为空，则不显示颜色
			if (this.formData.finishDate == '' || this.ocrDate == '') {
				return '';
			}
			// 如果二维码识别日期与铭牌识别日期一致，则显示绿色
			if (this.ocrDate == this.formData.finishDate) {
				return 'green';
			} else {
				return 'red';
			}
		}
	},
	methods: {
		// 重置按钮
		onResetButton(e) {
			//在里边添加想要的代码
			uni.showModal({
				title: '请确认',
				content: '是否重录',
				confirmText: '重录',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				}
			})
		},
		// 检查权限
		async checkPermission() {
			let status = permision.isIOS ? await permision.requestIOS('camera') :
				await permision.requestAndroid('android.permission.CAMERA');

			if (status === null || status === 1) {
				status = 1;
			} else {
				uni.showModal({
					content: "需要相机权限",
					confirmText: "设置",
					success: function (res) {
						if (res.confirm) {
							permision.gotoAppSetting();
						}
					}
				})
			}
			return status;
		},
		// 扫描机器条码
		async handleScanMachineBarCode() {
			// #ifdef APP-PLUS
			let status = await this.checkPermission();
			if (status !== 1) {
				return;
			}

			uni.scanCode({
				scanType: ['barCode'],
				success: (res) => {
					if (res.result && res.result.length == 11) {
						console.log("条码扫描结果", res.result);

						this.formData.productionControlNo = res.result;
						uni.showToast({
							title: '机器条码扫描成功',
							icon: 'none'
						})
						setTimeout(() => {
							this.currentIndex = 1;
						}, 500);
					} else {
						uni.showToast({
							title: '机器条码扫描失败',
							icon: 'none'
						})
					}
				}
			})
			// #endif
		},
		// 扫描机器二维码
		handleScanMachineQRCode() {
			this.mpaasScanModule.mpaasScan({
				'scanType': ['qrCode'],
				'failedMsg': '未识别到二维码，请重试',
				'screenType': 'full', //Android支持全屏需要设置此参数
				'timeoutInterval': '10', //设置超时时间
				'timeoutText': '未识别到二维码？' //超时提醒文本             
			},
				(ret) => {
					if (ret.resp_code == 1000) {
						let dateUrl = ret.resp_result;
						uni.showLoading({
							title: '识别中...',
							mask: true
						})
						uni.request({
							url: dateUrl,
							method: 'GET',
							header: {
								'Content-Type': 'application/json'
							},
							success: (res) => {
								uni.hideLoading()
								const datePattern = /\d{4}年\d{1,2}月\d{1,2}日/g;
								const match = res.data.match(datePattern);
								if (match) {
									this.formData.finishDate = match[0];
									uni.showToast({
										title: '日期识别成功',
										icon: 'none'
									})
									setTimeout(() => {
										this.currentIndex = 2;
									}, 500);
								} else {
									uni.showToast({
										title: '未识别到日期信息',
										icon: 'none'
									})
								}
							},
							fail: (err) => {
								uni.hideLoading()
								uni.showToast({
									title: '二维码解析失败',
									icon: 'none'
								})
							}
						})
					}
				})
		},
		// 拍摄机器铭牌
		captureMachinePlate() {
			uni.navigateTo({
				url: '/pages/camera/index'
			})
		},
		// 拍摄回调函数
		setImage(e) {
			// 证件照裁切
			this.clipper(e.path);
		},
		// 证件照裁切
		clipper(path) {
			uni.getImageInfo({
				src: path,
				success: (image) => {
					//因为nvue页面使用canvas比较麻烦，所以在此页面上处理图片
					let ctx = uni.createCanvasContext('canvas-clipper', this);

					ctx.drawImage(
						path,
						parseInt(0.07 * image.width),
						parseInt(0.28 * image.height),
						parseInt(0.86 * image.width),
						parseInt(0.40 * image.height),
						0,
						0,
						this.canvasSize.width,
						this.canvasSize.height
					);

					ctx.draw(false, () => {
						uni.canvasToTempFilePath({
							destWidth: this.canvasSize.width * 2,
							destHeight: this.canvasSize.height * 2,
							canvasId: 'canvas-clipper',
							fileType: 'jpg',
							success: (res) => {
								this.savePhoto(res.tempFilePath);
							}
						},
							this
						);
					});
				}
			});
		},
		// 图片上传ocr 识别
		async savePhoto(path) {
			this.imagesrc = path;
			// 图片转换为base64
			let base64 = await this.imgToBase64(path)
			uni.showLoading({
				title: "识别中。。。"
			})
			// 请求ocr接口
			uni.request({
				// 本地ocr
				// url: 'http://192.168.1.3:1224/api/ocr',
				// 85 ocr
				url: 'http://192.168.230.85:1224/api/ocr',
				method: 'POST',
				timeout: 10000,
				data: {
					base64: base64
				},
				success: (res) => {
					uni.hideLoading()
					if (res.data.code != 100) {
						uni.showToast({
							title: '未识别到文字信息',
							icon: 'none'
						})
						return
					}
					// 识别日期信息, 默认当前年
					let year = new Date().getFullYear(),
						month = "",
						day = "";
					res.data.data.forEach(item => {
						// 检索年
						const yearPattern = /\d{4}年/g;
						const yearMatch = item.text.match(yearPattern);
						if (yearMatch) {
							year = yearMatch[0].split('年')[0];
						}
						// 检索月
						const monthPattern = /\d{1,2}月/g;
						const monthMatch = item.text.match(monthPattern);
						if (monthMatch) {
							month = monthMatch[0].split('月')[0];
						}
						// 检索日
						const dayPattern = /\d{1,2}日/g;
						const dayMatch = item.text.match(dayPattern);
						if (dayMatch) {
							day = dayMatch[0].split('日')[0];
						}
					})
					if (!month || !day) {
						// ocr失败，弹窗确认
						uni.showModal({
							title: '请确认',
							content: `ocr识别失败，是否以二维码日期${this.formData.finishDate}录入完工单`,
							confirmText: '录入',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									this.submitWorkOrder();
								}
							}
						})
						return
					}
					let ocrDate = year + "年" + month + "月" + day + "日"
					this.ocrDate = ocrDate;

					if (ocrDate != this.formData.finishDate) {
						// ocr失败，弹窗确认
						uni.showModal({
							title: '请确认',
							content: `ocr识别日期与完工单日期不一致，是否以二维码日期${this.formData.finishDate}录入完工单`,
							confirmText: '录入',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									this.submitWorkOrder();
								}
							}
						})
						return
					}
				},
				fail: (err) => {
					uni.hideLoading()
					// ocr识别失败，弹窗确认
					uni.showModal({
						title: '请确认',
						content: `ocr识别失败，是否以二维码日期${this.formData.finishDate}录入完工单`,
						confirmText: '录入',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.submitWorkOrder();
							}
						}
					})
				}
			})
		},
		submitOrder() {
			if (this.ocrDate == '') {
				uni.showModal({
					title: '请确认',
					content: `ocr未识别到日期，是否以二维码日期${this.formData.finishDate}录入完工单`,
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.submitWorkOrder(this.formData.finishDate);
						}
					}
				})
			} else {
				let content = ""
				if (this.ocrDate == this.formData.finishDate) {
					content = `ocr识别日期与完工单日期一致，是否录入完工单`
				} else {
					content = `ocr识别日期与完工单日期不一致，是否录入完工单`
				}
				uni.showModal({
					title: '请确认',
					content: content,
					confirmText: '录入',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.submitWorkOrder();
						}
					}
				})
			}
		},
		// 提交工单
		submitWorkOrder() {
			uni.request({
				url: 'http://192.168.230.73:8888/yanmar/app/api/check/updateFinishDate',
				method: 'POST',
				data: this.formData,
				success: (res) => {
					let data = res.data.data;
					if (data.result != 1) {
						uni.showToast({
							title: data.message,
							icon: 'none'
						})
						return
					}
					uni.showToast({
						title: data.message,
						icon: 'success'
					})

					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 500);
				},
				fail: (err) => {
					uni.showToast({
						title: '录入失败',
						icon: 'none'
					})
				}
			})
		},
		// 图片转换为base64
		imgToBase64(url) {
			return new Promise((resolve, reject) => {
				// #ifdef MP-WEIXIN
				uni.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						resolve(res.data)
					},
					fail: (e) => {
						console.log("图片转换失败");
					}
				})
				// #endif
				// #ifdef H5
				uni.request({
					url: url,
					method: 'GET',
					responseType: 'arraybuffer',
					success: ress => {
						let base64 = uni.arrayBufferToBase64(ress.data); //把arraybuffer转成base64
						resolve(base64)
					},
					fail: (e) => {
						console.log("图片转换失败");
					}
				})
				// #endif
				// #ifdef APP-PLUS
				plus.io.resolveLocalFileSystemURL(url, (entry) => {
					// 可通过entry对象操作test.html文件 
					entry.file((file) => {
						let fileReader = new plus.io.FileReader();
						fileReader.onloadend = (evt) => {
							resolve(evt.target.result.split("base64,")[1])
						}
						fileReader.readAsDataURL(file);
					});
				}, (e) => {
					alert("Resolve file URL failed: " + e.message);
				});
				// #endif
			})
		}
	}
};
</script>

<style scoped>
.app-container {
	padding: 0 32rpx;
	display: flex;
	flex-direction: column;
	height: 90vh;
}

.swiper-container {
	flex: 1;
	padding-top: 120rpx;
}

.machine-plate {
	background-color: #f8f8f8;
	border-radius: 10rpx;

	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	width: 100%;
	aspect-ratio: 16/9;
	height: auto;
	max-width: 800rpx;
	margin: 0 auto;
}

.machine-plate-image {
	width: 60rpx;
	height: 60rpx;
}

.machine-plate-text {
	font-size: 32rpx;
	color: #999999;
}

.custom-btn {
	background-color: #CA1E30 !important;
	/* 绿色背景 */
	color: #ffffff !important;
	/* 黑色文字 */
	border-radius: 10px;
	/* 圆角 */
	border: none;
	/* 去除边框 */
	max-width: 600rpx;

	font-weight: 500;
	font-size: 28rpx;
}

.reset-button {
	position: absolute;
	bottom: 10%;
	right: 10%;
	width: 100rpx;
	height: 100rpx;
	background-color: #CA1E30;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ffffff;
	font-size: 28rpx;
	font-weight: 500;
	box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.steps-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100rpx;
	background-color: #ffffff;
	z-index: 100;
}

.machine-plate-text-container {
	font-size: 28rpx;
	color: #333333;
	font-weight: 500;
	margin-top: 20rpx;
}
</style>